<template>
	<view class="error-container">
		<view class="error-content">
			<image :src="errorImage" class="error-image"></image>
			<view class="error-message">{{errorMessage}}</view>
			<view class="error-tip">{{errorTip}}</view>
			<view class="error-detail" v-if="errorDetail">{{errorDetail}}</view>
		</view>
	</view>
</template>

<script>
	import { agentUtils } from '@/util/agent'
	
	export default {
		data() {
			return {
				errorMessage: '无效的访问链接',
				errorTip: '请使用正确的二维码扫码访问',
				errorDetail: '',
				errorImage: '/static/image/error.png',
				showRetry: false,
				errorType: 'invalid_link',
				isWechat: false
			}
		},
		onLoad(options) {
			// 判断是否是微信环境
			this.isWechat = agentUtils.isWechatBrowser()
			
			if (options.type) {
				this.handleErrorType(options.type, options.message)
			} else if (options.message) {
				this.errorMessage = options.message
			}
		},
		methods: {
			handleErrorType(type, message) {
				this.errorType = type
				switch(type) {
					case 'invalid_link':
						this.errorMessage = '无效链接'
						this.errorTip = '请使用正确的二维码扫码访问'
						this.errorImage = '/static/image/error.png'
						this.showRetry = false
						break
					case 'expired_link':
						this.errorMessage = '链接已过期'
						this.errorTip = '二维码已失效，请重新扫码'
						this.errorImage = '/static/image/expired.png'
						this.showRetry = true
						break
					case 'invalid_sign':
						this.errorMessage = '签名验证失败'
						this.errorTip = '请使用正确的二维码扫码访问'
						this.errorImage = '/static/image/error.png'
						this.showRetry = false
						break
					case 'network_error':
						this.errorMessage = '网络连接失败'
						this.errorTip = '请检查网络连接后重试'
						this.errorImage = '/static/image/network.png'
						this.showRetry = true
						break
					case 'server_error':
						this.errorMessage = '服务器错误'
						this.errorTip = '服务器暂时无法响应，请稍后重试'
						this.errorImage = '/static/image/server.png'
						this.showRetry = true
						break
					case 'invalid_platform':
						this.errorMessage = '请使用支付宝或微信扫码访问'
						this.errorTip = '当前浏览器不支持，请使用支付宝或微信扫码'
						this.errorImage = '/static/image/error.png'
						this.showRetry = false
						break
					default:
						if (message) {
							this.errorMessage = message
							this.errorTip = '请使用正确的二维码扫码访问'
						}
						break
				}
			},
			goBack() {
				if (this.isWechat) {
					// 调用微信的扫一扫功能
					if (window.wx && window.wx.scanQRCode) {
						window.wx.scanQRCode({
							needResult: 1,
							scanType: ["qrCode"],
							success: (res) => {
								window.location.href = res.resultStr
							},
							fail: () => {
								uni.showToast({
									title: '请在微信中重新扫码',
									icon: 'none'
								})
							}
						})
					} else {
						uni.showToast({
							title: '请在微信中重新扫码',
							icon: 'none'
						})
					}
				} else {
					uni.navigateBack({
						delta: 1,
						fail: () => {
							uni.showToast({
								title: '请使用支付宝或微信扫码访问',
								icon: 'none'
							})
						}
					})
				}
			},
			retry() {
				switch(this.errorType) {
					case 'expired_link':
						// 重新获取二维码
						uni.scanCode({
							success: (res) => {
								uni.redirectTo({
									url: res.result
								})
							},
							fail: () => {
								uni.showToast({
									title: '扫码失败',
									icon: 'none'
								})
							}
						})
						break
					case 'network_error':
					case 'server_error':
						// 重新加载当前页面
						uni.reLaunch({
							url: '/pages/index/index'
						})
						break
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.error-container {
		height: 100vh;
		display: flex;
		align-items: flex-start;
		justify-content: center;
		background-color: #f7f7f7;
		padding-top: 30px;
		
		.error-content {
			text-align: center;
			padding: 40rpx;
			width: 80%;
			
			.error-image {
				width: 200rpx;
				height: 200rpx;
				margin-bottom: 40rpx;
				display: block;
				margin-left: auto;
				margin-right: auto;
			}
			
			.error-message {
				font-size: 36rpx;
				color: #333;
				margin-bottom: 20rpx;
				font-weight: bold;
			}
			
			.error-tip {
				font-size: 28rpx;
				color: #666;
				margin-bottom: 20rpx;
			}
			
			.error-detail {
				font-size: 24rpx;
				color: #999;
				margin-bottom: 40rpx;
			}
			
			.button-group {
				display: flex;
				justify-content: center;
				gap: 20rpx;
				
				.back-btn, .retry-btn {
					width: 240rpx;
					height: 80rpx;
					line-height: 80rpx;
					font-size: 32rpx;
					border-radius: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 0;
				}
				
				.back-btn {
					background-color: #3175ff;
					color: #fff;
				}
				
				.retry-btn {
					background-color: #fff;
					color: #3175ff;
					border: 2rpx solid #3175ff;
				}
			}
		}
	}
</style> 